<template>
	<view class="home">
		<!-- <view class="tab-bar" :style="{ height: distanceY }" v-if="distanceY ? distanceY.slice(0, 2) > 0 : ''">乐居</view> -->
		<tab-bar></tab-bar>
		<nav-bar></nav-bar>
		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :circular="true" :interval="interval" :duration="duration">
			<swiper-item v-for="item in bannerList" :key="item.id"><image :src="item.img_url"></image></swiper-item>
		</swiper>
		<navigator url="/pages/find/index" open-type="switchTab" class="category_rec">
			<view class="header">
				<text class="name">品类推荐</text>
				<view class="header_r">
					更多
					<image src="../../static/image/icons/arr-r-1.png"></image>
				</view>
			</view>
			<view class="category_c">
				<view class="category-item" v-for="item in hotlist" :key="item.id">
					<view class="img-box"><image :src="item.cover_img"></image></view>
					<view class="name">{{ item.descr }}</view>
					<view class="author">{{ item.gname }}</view>
				</view>
			</view>
		</navigator>
		
		<view class="select category_rec">
			<view class="header select_t">
				<text class="name">特色优选</text>
				<view class="header_r">
					更多
					<image src="../../static/image/icons/arr-r-1.png"></image>
				</view>
			</view>
			
			<swiper class="swiper_b" previous-margin="80rpx" next-margin="40rpx" :interval="interval" :duration="duration">
				<swiper-item class="select_c" v-for="item in goodsList">
					<view class="select-item" @tap="goProductDetail(item.id)">
						<view class="kong"></view>
						<view class="info">
							<image :src="item.cover_img" mode=""></image>
							<view class="select-item-info">
								<view class="title">{{ item.descr }}</view>
								<view class="cname">{{ item.gname }}</view>
								<view class="color"><view class="color_item" v-for="subItem in item.colors" :style="{ 'background-color': subItem }"></view></view>
								<view class="desc">{{ item.detail_desc }}</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<!-- <scroll-view class="select_c" :scroll-x="true">
				<view class="select-item">
					<image src="" mode=""></image>
					<view class="select-item-info">
						<view class="title"></view>
						<view class="cname"></view>
						<view class="color"></view>
						<view class="desc"></view>
					</view>
				</view>
			</scroll-view> -->
		</view>
	</view>
</template>

<script>
import navBar from '../../components/NavBar/NavBar.vue';
import tabBar from '../../components/TabBar/TabBar.vue'
import { banners } from '../../utils/home/index.js';
import { hotList } from '../../utils/home/hotlist/index.js';
import { productList } from '../../utils/home/productList/index.js';

export default {
	data() {
		return {
			indicatorDots: true,
			autoplay: true,
			interval: 3000,
			duration: 500,
			bannerList: [],
			hotlist: [],
			goodsList: [],
			styleFlag: false,
			distanceY: uni.getStorageSync('distanceY') || 0
		};
	},
	methods: {
		getBannerList() {
			banners({ use: 0 }).then(res => {
				// console.log(res)
				this.bannerList = res.data.data;
			});
		},
		async getHotList() {
			let data = await hotList({});
			// console.log(data)
			this.goodsList = data.data.data;
		},
		async getProductList() {
			let data = await productList({});
			// console.log(data)
			this.hotlist.push(data.data.data.list[16]);
			this.hotlist.push(data.data.data.list[14]);
			this.hotlist.push(data.data.data.list[3]);
		},
		goProductDetail (id) {
			// console.log(id);
			uni.navigateTo({
				url: `/pages/kind/detail/detail?id=${id}`
			})
		}
	},
	onLoad() {
		this.getBannerList();
		this.getHotList();
		this.getProductList();
	},
	onPullDownRefresh() {
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1500);
	},
	onReachBottom() {
		// console.log('触底了')
	},
	components: {
		navBar,
		tabBar
	}
};
</script>

<style lang="scss">
@import '../../static/scss/mixin.scss';
.home {
	padding-top: var(--status-bar-height);
	padding-bottom: 50rpx;
	width: 100%;
	height: 100%;
	background: #f1ece7;
	.tab-bar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #354e44;
		color: #fff;
		z-index: 10;
		font-size: 28rpx;
	}
	.swiper {
		width: 100vw;
		// height: 428rpx;
		height: 516rpx;
		image {
			width: 100%;
			height: 100%;
			background: #5d4e49;
			border-radius: 0 0 30rpx 30rpx;
		}
	}
	.category_rec {
		margin-top: 40rpx;
		.header {
			width: 100vw;
			height: 45rpx;
			padding: 0 39rpx 0 40rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.name {
				font-size: 32rpx;
				color: #3e3e3e;
				letter-spacing: 2.29rpx;
				font-weight: bold;
			}
			.header_r {
				font-size: 26rpx;
				color: #8c8c8c;
				letter-spacing: 1.86rpx;
				image {
					width: 18rpx;
					height: 18rpx;
				}
			}
		}
		.category_c {
			width: 100vw;
			padding: 0 22rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			.category-item {
				width: 208rpx;
				margin-top: 39rpx;
				text-align: center;
				.img-box {
					width: 208rpx;
					height: 140rpx;
					box-shadow: 0 8rpx 24rpx 0 rgba(122, 98, 75, 0.06);
					border-radius: 20rpx;
					background-color: #fff;
					padding-top: 52rpx;
					box-sizing: border-box;
					image {
						width: 144rpx;
						height: 124rpx;
						border-radius: 10rpx;
					}
				}
				.name {
					margin-top: 96rpx;
					font-size: 26rpx;
					color: #3e3e3e;
					letter-spacing: 1.86rpx;
					font-weight: bold;
				}
				.author {
					font-size: 20rpx;
					color: #b0b0b0;
					letter-spacing: 1.43rpx;
				}
			}
		}
	}
	.select {
		width: 100vw;
		.select_t {
			margin-bottom: 39rpx;
		}
		.select_c {
			// box-sizing: border-box;
			// overflow: auto!important;
			margin-bottom: 80rpx;
			height: fit-content;
			.select-item {
				width: 590rpx;
				margin-right: 40rpx;
				// &:first-child {
				// 	margin-left: 80rpx;
				// }

				.kong {
					height: 54rpx;
				}
				.info {
					height: 260rpx;
					background: #ffffff;
					box-shadow: 0 16rpx 48rpx 0 rgba(122, 98, 75, 0.12);
					border-radius: 20rpx;
					display: flex;
					box-sizing: border-box;
					padding-left: 44rpx;
					image {
						width: 194rpx;
						height: 280rpx;
						border-radius: 10rpx;
						margin-top: -54rpx;
						// margin-right: 36rpx;
					}
					.select-item-info {
						flex: 1;
						box-sizing: border-box;
						padding: 50rpx 0 0 36rpx;
						// width: 100%;
						.title {
							font-size: 26rpx;
							color: #3e3e3e;
							letter-spacing: 1.86rpx;
						}
						.cname {
							font-size: 18rpx;
							color: #b0b0b0;
							letter-spacing: 1.29rpx;
						}
						.color {
							display: flex;
							margin: 19rpx 0 28rpx;
							.color_item {
								width: 20rpx;
								height: 20rpx;
								border-radius: 50%;
								margin-right: 8rpx;
							}
						}
						.desc {
							font-size: 22rpx;
							width: 70%;
							@include text;
							color: #3e3e3e;
							letter-spacing: 1.57rpx;
						}
					}
				}
			}
		}
	}
}
swiper.swiper .wx-swiper-dot {
	opacity: 0.5;
	background: #d8d8d8 !important;
}
swiper.swiper .wx-swiper-dot.wx-swiper-dot-active {
	opacity: 1;
	background: #d8d8d8 !important;
}
</style>
